<template>
    <div id="app">
        <div class="box" v-for="(v,i) in this.$store.state.home.home" :key="i"  v-on:click="HomeDetail(i)" ref="demo">
            <div class="content">
                <h2>{{v.title}}</h2>
                <div v-bind:class='v.textImg===""?"":"bottom"'>
                    <div v-bind:class='v.textImg===""?"":"b-content"'>
                        <p class="content-tit">
                            <img :src="v.useimg" alt="" class="img-tit">
                            <span>
                            {{v.name}}<img :src="v.minImg" v-if="v.minImg!==''" alt="" class="img-text">
                    <i>{{v.usetext}}</i>
                </span>
                        </p>
                        <p class="content-text">{{v.text}}</p>
                        <p class="content-bottom">
                            <span>{{v.Yes}}</span> 赞同·
                            <span>{{v.opition}}</span> 评论
                        </p>
                    </div>
                    <img :src="v.textImg" alt="" class="img-img" v-if="v.textImg!==''">
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "content",
        data() {
            return {}
        },
        methods: {
            HomeDetail(id){
              //  console.log(id)
                //let target=e.target||e.srcElement;
                this.$router.push({name:"HomeDetail",params:{value:id}});
            }
        },
        created() {
            //在页面加载时读取localStorage里的状态信息
            if (localStorage.getItem("data")) {
                //replaceState替换数据 Object.assign合并对象
                this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem("data"))))
            }
            //在页面刷新时将vuex里的信息保存到localStorage里
            window.addEventListener("beforeunload", () => {
                localStorage.setItem("data", JSON.stringify(this.$store.state))
            })
        },
    }
</script>

<style scoped>
    #app {
        padding-bottom: 0.6rem;
    }

    .box {
        width: 100%;
        padding: 0 0.15rem;
        margin-top: 0.07rem;
        background-color: #ffffff;
    }

    .content {
        padding: 0.14rem 0.02rem;
    }

    h2 {
        font-size: 0.16rem;
        color: #000000;
        font-weight: bold;
    }

    .content-text {
        font-size: 0.14rem;
        color: #171717;
        margin-top: 0.05rem;
    }

    .img-tit {
        width: 0.2rem;
        vertical-align: bottom;
    }

    .img-text {
        width: 0.15rem;
        vertical-align: middle;
        margin: 0 0.04rem;
    }

    .img-img {
        width: 0.84rem;
        height: 0.6rem;
    }

    span {
        font-size: 0.13rem;
        color: #454545;
    }

    i {
        font-style: normal;
        color: #959595;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .content-tit {
        margin-top: 0.05rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .content-bottom {
        font-size: 0.12rem;
        color: #8c8c8c;
        margin-top: 0.05rem;
    }

    .b-content {
        width: 2.45rem;
        padding-right: 0.25rem;
    }

    .b-content .content-text {
        width: 2.45rem;
        height: 0.44rem;
        padding-right: 0.25rem;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .bottom {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
</style>